<template>
    <form action="/">
        <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
        />
    </form>
    <van-divider content-position="left">已选择标签</van-divider>
    <van-row gutter="20">
        <van-col gutter="20" v-for="tag in activeIds">
            <van-tag :show="show" closeable size="medium" type="primary" @close="close(tag)">
                {{tag}}
            </van-tag>
        </van-col>
    </van-row>

    <van-divider content-position="left">选择标签</van-divider>
    <van-tree-select
        v-model:active-id="activeIds"
        v-model:main-active-index="activeIndex"
        :items="originTagList"
    />
    <van-button block type="primary" @click="doSearchResult">搜索</van-button>

</template>

<script setup lang="ts">
import {ref} from "vue";
import {showToast} from "vant";
import {useRouter} from "vue-router";
let router = useRouter();

const value = ref('');
const onSearch = (val) => showToast(val);
const onCancel = () => showToast('取消');
/**
 * 被勾选的children里面的id
 */
const activeIds = ref([]);
/**
 *左侧索引
 */
const activeIndex = ref(0);
const originTagList = [
    {
        text: '性别',
        children: [
            { text: '男', id: '男' },
            { text: '女', id:'女' },
        ],
    },
    {
        text: '年纪',
        children: [
            { text: '大一', id:'大一' },
            { text: '大二', id:'大二' },
            { text: '大三', id:'大三' },
            { text: '大四', id:'大四'},
        ],
    },
];
const show = ref(true);
/**
 * 删除已经选择的标签
 * @param tag
 */
const close = (tag) => {
    activeIds.value=activeIds.value.filter((item)=>{
        return item!==tag
    })
}
const doSearchResult=()=>{
    router.push({
        path: '/user/list',
        query:{
            tags:activeIds.value
        }
    })
}
</script>

<style scoped>

</style>